<template>
  <div class="fansPage">
    <div class="show" v-for = "(fan , index) in fans" :key="index">     
            <div class="head"> <!--个人信息面板-->
                <img src="../../assets/logo.png" alt="">
                <div class="name"> <!-- 昵称-->
                    <div>
                        <span style="font-size: 16px; color:  color: rgba(0,0,0,.85);;">
                        {{ fan.nickname}}
                        </span>
                    </div>
                    <div class="grade">
                     <span> {{fan.grade}}</span> <!-- 等级-->                      
                    </div>
                </div>
                <div class="introduce">
                    <span>{{ fan.brief }}</span>
                </div>
                <div class="btn" @click="addFan(fan)">
                <el-button type="primary" plain>{{ fan.staus }}</el-button>
                </div>
            </div>
           
        </div>


  </div>
</template>

<script>
import { Message } from 'element-ui';
import instance from '../../utils/request';
export default {
    name:'Fans',
    data() {
        return {
            fans:[
                {
                    nickname:'王贝贝',
                    grade:'v1',
                    brief:'我是王贝贝 ',
                    staus:'已关注'

                },
                
                {
                    nickname:'陈亦康',
                    grade:'v5',
                    brief:"我是陈亦康",
                    staus:'已关注'


                },
                {
                    nickname:'董佼能',
                    grade:'v3',
                    brief:"我是陈亦康",
                    staus:'已关注'


                },
                {
                        nickname:'杜鹏展',
                        grade:'v3',
                    brief:"我是陈亦康",
                    staus:'已关注'


                }
            ],
     
            
        
        }
    },

    methods:{

        addFan(fan){
            //未关注的情况
            instance.get('user/followers?id'+fan.id).then(success=>{
                if(success.data.code==1000){
                    Message.success('关注成功')
              
                }
            }).catch(error=>{
                Message.error('关注失败')
                console.log(error)
            })

        }
    }
}
</script>

<style scoped>
.show{
  width: 900px;
  height: 100%;
  background-color:rgba(255, 255, 255, 0.8);
  margin: 20px auto;
  padding-bottom: 20px;
  padding-left: 20px;
}
.nickname {
    color: rgba(0, 0, 0, .85);
    font-weight: 600;
    font-size: 20px;
}
img{
    margin: 10px 0;
    width: 60px;
    height: 60px;
    border-radius: 30px;
}
.introduce{
    width: 70%;
    height: 100%;
    color: rgba(0, 0, 0, .45);
    margin-left: -200px ;
    margin-top: 45px;
    /* word-wrap: break-word; */
    overflow-wrap: break-word;
}
.head{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    border-bottom: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    border-bottom-style: solid;
}
.name{
    width: 200px;
    height: 20px;
    margin-top: 10px;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
}
.grade>span {
    padding: 3px 5px;

}


.grade {
    color: green;
    width: 30px;
    height: 20px;
    margin-top: 2px;
    margin-left: 15px;
    border: 1px solid rgb(66, 103, 10);

}
.btn{
    position: absolute;
    right: 10px;
    top: 20%;
}


</style>